import React from 'react';
import { connect } from 'react-redux';
import { API_HOST } from 'Constants/config';
import { message } from 'antd';
import Api from 'Utils/api';
import VR_TYPE from 'Constants/vrType';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';

class DetailPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {},
    };
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.state.id}`,
      success: (json) => {
        this.setState({ data: json });
        if (json.media && !json.vr_link) {
          this.insertVrInfos(json.media_type, json.media);
        }
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnVrType(type) {
    if (type.indexOf('video') > -1) {
      return VR_TYPE.video;
    }
    if (type.indexOf('image') > -1) {
      return VR_TYPE.img;
    }
    return false;
  }
  insertVrInfos(mediaType, media) {
    if (this.returnVrType(mediaType) === VR_TYPE.video) {
      if (!this.vrVideo) {
        this.vrVideo = new VRView.Player('#video', {
          width: '100%',
          height: '100%',
          video: `${API_HOST}/files/${media}`,
          is_stereo: false,  //区分是mono还是stereo
        });
      } else {
        this.vrVideo.setContent({
          video: `${API_HOST}/files/${media}`,
        });
      }
    }
    if (this.returnVrType(mediaType) === VR_TYPE.img) {
      if (!this.vrVideo) {
        this.vrVideo = new VRView.Player('#video', {
          width: '100%',
          height: '100%',
          image: `${API_HOST}/files/${media}`,
          is_stereo: false,  //区分是mono还是stereo
        });
      } else {
        this.vrVideo.setContent({
          image: `${API_HOST}/files/${media}`,
        });
      }
    }
  }
  render() {
    const { data } = this.state;
    return (
      <CommonBorder
        title="VR虚拟现实详情"
        content={
          <div className="dynamic-detail-body-container">
            <ul className="detail-body">
              <li className="item">
                <div>标题：</div>
                <div>{data.title}</div>
              </li>
              <li className="item">
                <div>VR：</div>
                {
                  data.media ? <div className="video-wrap" id="video" /> : ''
                }
                {
                  data.vr_link ? <div className="vr_link"><a href={data.vr_link}>{data.title}链接</a></div> : ''
                }
              </li>
              <li className="item">
                <div>{!data.vr_link ? '介绍：' : ''}</div>
                <div>
                  {
                    data.content ? <span dangerouslySetInnerHTML={{ __html: data.content.replace(/\n/g, '<br/>') }} /> : ''
                  }
                </div>
              </li>
              {
                data.thumbnail_id ?
                  <li className="item">
                    <div>封面:</div>
                    <div>
                      <img className="thumbnailImg" src={`${API_HOST}/files/${data.thumbnail_id}`} alt="" />
                    </div>
                  </li> : ''
              }
            </ul>
          </div>
        }
      />
    );
  }
}


function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(DetailPage);
